@import "common";

.info {
  display: flex;

  .avatar {
    height: 20px;
  }

  .name {
    margin-left: $margin-mix2;
  }

  .split {
    margin-left: $margin-mix;
  }

  .logout {
    cursor: pointer;
    margin-left: $margin-mix;
    color: $blue-color;
  }
}

.content {
  padding-top: $header-height;
  display: flex;

  .leftPanel {
    width: 160px;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 0 $margin-mix;

    .col {
      display: flex;
      align-items: center;
      width: 100%;
      height: $header-height;
      border-bottom: 1px solid #E4E5E6;
      cursor: pointer;
      color: $text-color;
    }

    .select {
      color: $theme-color;
    }
  }

  .rightPanel {
    flex-grow: 2;
    background-color: $background-color;
    padding: $margin-mix2;

    .con {
      background-color: white;
      width: calc(100% - 20px);
      height: 100%;
      padding: 0px $margin-mix2;

      .con-sub {
        .con-title {
          width: 100%;
          height: $margin-min;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #E4E5E6;
        }

        .con-body {
          margin: 0px $margin-mix2;

          .con-operation {
            display: flex;
            align-items: center;
            height: $header-height;
            margin: $margin-mix 0px;

            .input-info {
              margin-left: $margin-mix;
              font-size: 16px !important;
              background-color: rgba(white, 0);
              outline: none !important;
              border: none;
              border: 1px solid #E4E5E6;
              height: 30px;
              width: 182px;
              color: $text-color;

              &::placeholder {
                color: $text-color-light;
              }
            }

            .label.staff {
              margin-left: $margin-mix;
            }

            .button-blue {
              margin-left: $margin-min;
              height: 30px;
              width: 78px;
              outline: none !important;
              border: none;
              background-color: $blue-color;
              color: white;
              font-size: 16px;

              &:active {
                background-color: $blue-color-dark;
              }
            }
          }

          .con-operation4 {
            display: flex;
            align-items: center;
            height: auto;
            margin: $margin-mix 0px;

            .input-info {
              margin-left: $margin-mix;
              font-size: 16px !important;
              background-color: rgba(white, 0);
              outline: none !important;
              border: none;
              border: 1px solid #E4E5E6;
              height: 30px;
              width: 182px;
              color: $text-color;

              &::placeholder {
                color: $text-color-light;
              }
            }

          }

          .button-blue {
            height: 30px;
            width: 78px;
            outline: none !important;
            border: none;
            background-color: $blue-color;
            color: white;
            font-size: 16px;

            &:active {
              background-color: $blue-color-dark;
            }
          }


          .con-operation2 {
            display: flex;
            justify-content: flex-end;

            .button-red {
              height: 30px;
              width: 100px;
              outline: none !important;
              border: none;
              background-color: $theme-color;
              color: white;
              font-size: 16px;

              &:active {
                background-color: $theme-color-dark;
              }
            }
          }

          .con-content {
            border: 1px solid #E4E5E6;
            margin: $margin-mix 0;
            padding: 0;
            list-style: none;

            li {
              display: flex;
              align-items: center;
              flex-grow: 1;

              .item {
                margin: $margin-mix2;
                text-align: center;
                word-break: break-all;
              }
            }

            .th {
              height: 30px;
              background-color: $theme-color-light;

              .item {
                flex-grow: 1;
              }
            }

            .tr {
              border-top: 1px solid #E4E5E6;
              min-height: 30px;

              .action-edit {
                cursor: pointer;
                color: $blue-color;

                &:active {
                  color: $blue-color-dark;
                }
              }
            }
          }

          .con-operation3 {
            display: flex;
            justify-content: flex-end;
            height: $header-height;
            align-items: center;

            .leftRight {
              cursor: pointer;
              height: 30px;
              width: 30px;
              border: 1px solid #E4E5E6;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .label {
              margin: 0 $margin-mix2;
            }

            .input-index {
              margin-left: $margin-mix2;
              font-size: 16px !important;
              background-color: rgba(white, 0);
              outline: none !important;
              border: none;
              border: 1px solid #E4E5E6;
              height: 30px;
              width: 60px;
              color: $text-color;

              &::placeholder {
                color: $text-color-light;
              }
            }

            .button-jump {
              margin-left: $margin-mix;
              height: 30px;
              width: 78px;
              outline: none !important;
              border: none;
              background-color: $gray-color;
              color: $text-color;
              font-size: 16px;

              &:active {
                background-color: $gray-color-dark;
              }
            }
          }

        }

      }

      .con-order {
        .start {
          margin-left: $margin-mix;
        }

        .end {
          margin-left: $margin-mix;
        }

        .input-info {
          width: 160px !important;
        }

        .input-date {
          margin-left: $margin-mix;
          font-size: 16px !important;
          background-color: rgba(white, 0);
          outline: none !important;
          border: none;
          border: 1px solid #E4E5E6;
          height: 30px;
          width: 160px;
          color: $text-color;

          &::placeholder {
            color: $text-color-light;
          }
        }

        .button-yellow {
          height: 30px;
          width: 100px;
          outline: none !important;
          border: none;
          background-color: $yellow-color;
          color: white;
          font-size: 16px;

          &:active {
            background-color: $yellow-color-dark;
          }
        }
      }

      .tweet-title {
        display: flex;
        align-items: center;
        height: $header-height;
        .input-info {
          margin-left: $margin-mix;
          font-size: 16px !important;
          background-color: rgba(white, 0);
          outline: none !important;
          border: none;
          border: 1px solid #E4E5E6;
          height: 30px;
          width: 182px;
          color: $text-color;

          &::placeholder {
            color: $text-color-light;
          }
        }

      }

      .tweet-con {
        width: 100%;
        height: 70% !important;

        .w-e-text-container {
          height: 100% !important;
        }
      }

      .tweet-con-op {
        margin-top: 40px;
        display: flex;
        justify-content: flex-start;

        .button-red {
          height: 50px;
          width: 40%;
          max-width: 200px;
          outline: none !important;
          border: none;
          background-color: $gray-color-dark;
          color: white;
          font-size: 16px;

          &:active {
            background-color: $gray-color-back;
          }
        }

        .button-blue {
          margin-left: $margin-min;
          height: 50px;
          width: 40%;
          max-width: 200px;
          outline: none !important;
          border: none;
          background-color: $blue-color;
          color: white;
          font-size: 16px;

          &:active {
            background-color: $blue-color-dark;
          }
        }
      }

    }


  }

}

.popup {
  overflow: scroll;
  max-height: calc(100% - 160px);
  top: 80px;
  z-index: 3;
  display: none;
  width: 50%;
  height: auto;
  position: fixed;
  left: 50%;
  margin-left: -25%;
  background-color: white;
  color: white;
  padding: 10px;
  box-shadow: 0 0 20px 10px #E6E7E8;

  .popup-header {
    cursor: pointer;
    color: $blue-color;
  }

  .popup-content {
    padding: 20px;
    display: flex;
    flex-direction: column;

    .op-content {
      display: flex;

      .delete {
        background-color: $gray-color-dark;
      }
    }

    .avatar {
      width: 60px;
      height: 60px;
      margin-left: calc(50% - 30px);
      border-radius: 30px;
      object-fit: cover;
    }

    input {
      font-size: 16px !important;
      font-weight: 600 !important;
      background-color: rgba(white, 0);
      outline: none !important;
      border: none;
      border-bottom: 1px solid #E4E5E6;
      height: 40px;
      margin: $margin-mix $margin-min 0px;
      color: $text-color;

      &::placeholder {
        color: $text-color-light;
      }

      &:active, &:focus {
        border-color: $text-color;
      }

      &:disabled {
        color: $text-color-light;
      }
    }

    button {
      flex-grow: 1;
      height: 40px;
      outline: none !important;
      border: none;
      background-color: $theme-color;
      margin: $margin-min $margin-min 0px;
      color: white;
      font-size: 16px;

      &:active {
        background-color: $theme-color-dark;
      }
    }
  }
}